<template>
  <div class="about-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>关于本项目</h2>
        </div>
      </template>
      <div class="about-content">
        <p>这是一个基于Vue3+Vite+ElementPlus构建的SPA项目模板。</p>
        <h3>技术栈</h3>
        <el-tag v-for="tech in techStack" :key="tech" class="tech-tag">{{ tech }}</el-tag>
        
        <h3 class="mt-4">项目结构</h3>
        <el-tree :data="projectStructure" :props="defaultProps" default-expand-all />
        
        <h3 class="mt-4">功能特点</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(feature, index) in features"
            :key="index"
            :type="feature.type"
            :color="feature.color"
            :timestamp="feature.timestamp"
          >
            {{ feature.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const techStack = ref([
  'Vue 3',
  'Vite 4',
  'JavaScript',
  'Vue Router 4',
  'Pinia 2',
  'Axios',
  'Element Plus 2',
  'SCSS'
])

const projectStructure = ref([
  {
    label: 'src',
    children: [
      { label: 'assets (静态资源)' },
      { label: 'components (公共组件)' },
      { label: 'layouts (页面布局)' },
      { label: 'pages (业务页面)' },
      { label: 'store (Pinia模块)' },
      { label: 'router (路由配置)' },
      { label: 'services (API服务层)' },
      { label: 'utils (工具函数)' },
      { label: 'main.js (入口文件)' },
      { label: 'App.vue (根组件)' }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

const features = ref([
  {
    content: '基于Vite的快速开发环境',
    timestamp: '开发效率',
    type: 'primary',
    color: '#409EFF'
  },
  {
    content: '集成ElementPlus组件库，支持自动导入和暗黑模式',
    timestamp: 'UI框架',
    type: 'success',
    color: '#67C23A'
  },
  {
    content: '使用Pinia进行状态管理，支持持久化',
    timestamp: '状态管理',
    type: 'warning',
    color: '#E6A23C'
  },
  {
    content: '封装Axios，统一处理请求和响应',
    timestamp: 'HTTP服务',
    type: 'danger',
    color: '#F56C6C'
  },
  {
    content: '动态路由配置，支持嵌套路由和路由守卫',
    timestamp: '路由系统',
    type: 'info',
    color: '#909399'
  }
])
</script>

<style scoped lang="scss">
.about-page {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-content {
  p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
  }
  
  h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 18px;
  }
}

.tech-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.mt-4 {
  margin-top: 20px;
}
</style>